<template>
    <div id="content">
        <div id="map" ref="map"></div>
        <h1 id="msg"></h1>
    </div>
</template>

<script>
    import "ol/css";
    import {Map, View, Feature} from "ol";

    import XYZ from "ol/source/XYZ";
    import TileLayer from "ol/layer/Tile";

    import {Vector as VectorSource} from "ol/source";
    import {Vector as VectorLayer} from "ol/layer";
    import {Point} from "ol/geom";
    import {Style, Circle, Fill} from "ol/style";
    import {Select, Draw} from "ol/interaction";
    import {never} from "ol/events/condition";

    export default {
        name: "AppCircleSelect",
        data() {
            return {};
        },
        methods: {},
        mounted() {
            // 创建要素图层
            var vectorLayer = new VectorLayer({
                source: new VectorSource({
                    features: [
                        new Feature({
                            geometry: new Point([120.0, 30.0]),
                            name: 'A'
                        }),
                        new Feature({
                            geometry: new Point([120.1, 30.1]),
                            name: 'B'
                        }),
                        new Feature({
                            geometry: new Point([120.2, 30.2]),
                            name: 'C'
                        })
                    ]
                }),
                style: new Style({
                    image: new Circle({
                        radius: 30,
                        fill: new Fill({
                            color: 'blue'
                        })
                    })
                })
            });

            // 创建绘制图层
            var drawLayer = new VectorLayer({
                source: new VectorSource(),
                style: new Style()
            });

            var gaodeLayer = new TileLayer({
                source: new XYZ({
                    url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
                })
            });
            // 创建地图
            var map = new Map({
                target: 'map',
                layers: [
                    gaodeLayer,
                    vectorLayer,
                    drawLayer
                ],
                view: new View({
                    projection: 'EPSG:4326',
                    center: [120, 30],
                    zoom: 10
                })
            });

            // 创建选择工具，用于盛放圆形内的要素
            var select = new Select({
                condition: never,
                style: new Style({
                    image: new Circle({
                        radius: 30,
                        fill: new Fill({
                            color: 'red'
                        })
                    })
                })
            });

            // 创建绘制圆形工具
            var drawBox = new Draw({
                source: drawLayer.getSource(),
                type: 'Circle'
            });

            // 开始绘制，清除已有要素
            drawBox.on('drawstart', function () {
                select.getFeatures().clear();
                drawLayer.getSource().clear();
            });

            // 结束绘制
            drawBox.on('drawend', function (e) {
                if (e.feature) {
                    // 获取圆的外接矩形范围
                    var circle = e.feature.getGeometry();
                    var extent = circle.getExtent();

                    // 查询外接矩形范围内的所有点
                    vectorLayer.getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
                        var coordinates = feature.getGeometry().getCoordinates();

                        // 判断该点是否在圆内部
                        if (circle.intersectsCoordinate(coordinates)) {
                            select.getFeatures().push(feature);
                        }
                    });

                    // 遍历被选中的要素
                    var selected = [];
                    var selectedFeatures = select.getFeatures();
                    for (var i = 0; i < selectedFeatures.getLength(); i++) {
                        var feature = selectedFeatures.item(i);
                        var name = feature.get('name');
                        selected.push(name);
                    }

                    // 输出查询结果
                    var msg = selected.join('、');
                    document.getElementById('msg').innerText = '被选中的要素：' + msg;
                }
            });

            // 添加交互工具
            map.addInteraction(drawBox);
            map.addInteraction(select);
        }
    };
</script>
<style lang="scss" scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 20px;
        left: 20px;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }
</style>